<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">


	<ui:define name="content">
	<h1 class="title ui-widget-header ui-corner-all">DataTable - Dynamic Columns</h1>
		<div class="entry">
			<p>Columns of datatable can be defined dynamically with p:columns component. Since columns are created
            on-the-fly it is easy to add/remove columns programmatically. Column template below is a white-space separated values that can be a combination
            of "model", "manufacturer", "color" and "year".</p>

            <h:form id="form">
                
                <h:panelGrid id="grid" columns="3" style="margin-bottom:10px">
                    <h:outputLabel for="template" value="Template:" style="font-weight:bold"/>
                    <p:inputText id="template" value="#{tableBean.columnTemplate}" size="50"/>
                    <p:commandButton id="btn" update="cars" actionListener="#{tableBean.updateColumns}" value="Update" process="@parent"
                                     onclick="carsTable.clearFilters()"/>
                </h:panelGrid>

                <p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}" widgetVar="carsTable" filteredValue="#{tableBean.filteredCars}">                    
                    <p:columns value="#{tableBean.columns}" var="column" columnIndexVar="colIndex" 
                                sortBy="#{car[column.property]}" filterBy="#{car[column.property]}">
                        <f:facet name="header">
                            #{column.header}
                        </f:facet>

                        #{car[column.property]}
                    </p:columns>

                </p:dataTable>

            </h:form>

		<h3>Source</h3>
		<p:tabView>
			<p:tab title="datatableDynamicColumns.xhtml">
                <pre name="code" class="xml">
&lt;h:form id="form"&gt;
                
    &lt;h:panelGrid id="grid" columns="3" style="margin-bottom:10px"&gt;
        &lt;h:outputLabel for="template" value="Template:" style="font-weight:bold"/&gt;
        &lt;p:inputText id="template" value="\#{tableBean.columnTemplate}" size="50"/&gt;
        &lt;p:commandButton id="btn" update="cars" actionListener="\#{tableBean.updateColumns}" value="Update" process="@parent"/&gt;
    &lt;/h:panelGrid&gt;

    &lt;p:dataTable id="cars" var="car" value="\#{tableBean.carsSmall}" filteredValue="\#{tableBean.filteredCars}"&gt;                    
        &lt;p:columns value="\#{tableBean.columns}" var="column" columnIndexVar="colIndex" 
                    sortBy="\#{car[column.property]}" filterBy="\#{car[column.property]}"&gt;
            &lt;f:facet name="header"&gt;
                \#{column.header}
            &lt;/f:facet&gt;

            \#{car[column.property]}
        &lt;/p:columns&gt;

    &lt;/p:dataTable&gt;

&lt;/h:form&gt;
				</pre>
			</p:tab>

			<p:tab title="TableBean.java">
                <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.IOException;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.component.UIComponent;
import org.primefaces.examples.domain.Car;
import java.util.*;

public class TableBean implements Serializable {
    
    private final static List&lt;String&gt; VALID_COLUMN_KEYS = Arrays.asList("model", "manufacturer", "year", "color");

	private final static String[] colors;
	
	private final static String[] manufacturers;

    private String columnTemplate = "model manufacturer year";

	static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";
		
		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

    private List&lt;Car&gt; filteredCars;

	private List&lt;Car&gt; carsSmall;

    private List&lt;ColumnModel&gt; columns = new ArrayList&lt;ColumnModel&gt;();;

	public TableBean() {
		carsSmall = new ArrayList&lt;Car&gt;();
		
		populateRandomCars(carsSmall, 9);

        createDynamicColumns();
	}
	
	private void populateRandomCars(List&lt;Car&gt; list, int size) {
		for(int i = 0 ; i &lt; size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}
	
	public List&lt;Car&gt; getCarsSmall() {
		return carsSmall;
	}

	private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}
	
	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}
	
	private String getRandomManufacturer() {
		return manufacturers[(int) (Math.random() * 10)];
	}
    
	private String getRandomModel() {
		return UUID.randomUUID().toString().substring(0, 8);
	}
	
    public List&lt;ColumnModel&gt; getColumns() {
        return columns;
    }

    public String[] getManufacturers() {
        return manufacturers;
    }

    public String[] getColors() {
        return colors;
    }

    public List&lt;Car&gt; getFilteredCars() {
        return filteredCars;
    }

    public void setFilteredCars(List&lt;Car&gt; filteredCars) {
        this.filteredCars = filteredCars;
    }
    
    static public class ColumnModel implements Serializable {

        private String header;
        private String property;

        public ColumnModel(String header, String property) {
            this.header = header;
            this.property = property;
        }

        public String getHeader() {
            return header;
        }

        public String getProperty() {
            return property;
        }
    }
    
    public String getColumnTemplate() {
        return columnTemplate;
    }
    public void setColumnTemplate(String columnTemplate) {
        this.columnTemplate = columnTemplate;
    }
    
    public void updateColumns() {
        //reset table state
        UIComponent table = FacesContext.getCurrentInstance().getViewRoot().findComponent(":form:cars");
        table.setValueExpression("sortBy", null);
        
        //update columns
        createDynamicColumns();
    }
    
    public void createDynamicColumns() {
        String[] columnKeys = columnTemplate.split(" ");
        columns.clear();      
        
        for(String columnKey : columnKeys) {
            String key = columnKey.trim();
            
            if(VALID_COLUMN_KEYS.contains(key)) {
                columns.add(new ColumnModel(columnKey.toUpperCase(), columnKey));
            }
        }
    }
}
				</pre>
			</p:tab>
		</p:tabView>
	       </div>

	</ui:define>
</ui:composition>